<template>
	<view class="content">
		<view class="search align-center">
			<u-search v-model="value" height="2.5rem" shape="square" placeholder="请输入土地编号" @custom="searchFn">
			</u-search>
		</view>
		<view class="list-wrapper">
			<view class="list">
				<view class="list-item" v-for="(item, index) in list" :key="item.id" @click="toDetail(item.id)">
					<u-cell>
						<view slot="title" style="font-size:1.5rem;">
							地块编码: {{item.landCode || ''}}
						</view>
						<view slot="label" style="margin-top:.5rem;font-size:1.2rem;color:#aaa;">
							亩产: {{item.cropYield || ''}}
						</view>
						<view slot="value" class="op-area flex-row" style="font-size:1.4rem;">
							作物名称:{{item.plantingName || ''}}
						</view>
					</u-cell>
				</view>
				<u-loadmore :status="status" height="2.5rem" />
			</view>
		</view>
	</view>
</template>
<script>
import {getLandOne} from '@/api/farmer/land.js';

export default {
		data() {
			return {
				value: '',
				farmerInfo: {},
				list: [],
				status: 'loading',
				pageInfo: {
					pageNo: 1,
					pageSize: 20,
				}
			};
		},
		onLoad() {
			this.getLandOneFn();
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: './detail/index?id=' + id
				});
			},
			initFn() {
				this.list = [];
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.pageInfo = {
					pageNo: 1,
					pageSize: 20,
				}
			},
			searchFn() {
				this.initFn();
				this.pageFn()
			},
			async getLandOneFn() {
				let id = uni.getStorageSync('userInfo').farmerId;
				if(!id){
					this.$util.msg('获取id失败，请重新登录重试');
					return 
				}
				let res = await getLandOne({
					id
				})
				res = res || {
					plantingInformationList: []
				}
				if (!res.plantingInformationList || res.plantingInformationList.length == 0) {
					this.$util.msg('暂无地块')
				}
				this.farmerInfo = res
				this.pageFn()
			},
			pageFn() {
				let res = this.farmerInfo.plantingInformationList;
				if (!res) {
					this.status = 'nomore';
					return
				}
				if (this.value.trim()) {
					res = res.filter((item) => {
						if (item.landCode) {
							return item.landCode.includes(this.value)
						}
					})
				}
				res = res.slice((this.pageInfo.pageNo - 1) * this.pageInfo.pageSize, this.pageInfo.pageSize)
				if (res.length < this.pageInfo.pageSize) {
					this.status = 'nomore'
				}
				this.list = this.list.concat(res);
			}
		},
		onReachBottom() {
			this.pageInfo.pageNo++
			this.pageFn()
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		background-color: rgb(246, 247, 251);

		.search {
			background-color: #fff;
			position: fixed;
			width: 100%;
			z-index: 10000;
			height: 5rem;
			padding: 0 1rem;
		}

		.list-wrapper {
			width: 100%;
			padding-top: 5rem;
		}

		.list {
			background-color: #fff;
			color: #293038;
			padding: 0 1.2rem 1rem;

			.list-item {
				padding: 1rem 0 1rem;

				/deep/ .u-cell {
					.u-cell__body {
						padding-left: 0;
						padding-right: 0;

						.u-cell__left-icon-wrap {
							margin-right: 1rem;
						}

						.u-cell__title-text {
							font-size: 1.3rem;
							color: #293038;
						}

						.data-label {
							font-size: 1.1rem;

							.data-info {
								color: #293038;
							}

							.date {
								color: #9CA2AE;
							}


						}

						.u-cell__label {
							font-size: 1.1rem;
							color: #9CA2AE;
						}
					}

				}

				.op-area {
					button {
						width: 5.8rem;
						height: 2.2rem;
						line-height: 2.2rem;
						border-radius: 1.1rem;
						font-size: 1.1rem;
					}

					.status {
						background-color: rgba(55, 168, 99, 0.1) !important;
						color: #37A863;
						margin-left: .8rem;
					}
				}
			}
		}
	}
</style>
